<template>
  <div class="search">
    <x-header>搜索</x-header>
    <search 
      position='absolute' 
      auto-scroll-to-top 
      ref="search"  
      :results="results" 
      v-model="value" 
      top='46px' 
      @result-click="resultClick"
      @on-focus='onfocus'
      @on-blur='onblur' 
      @on-change="getResult" 
      @on-cancel="onCancel" 
      @on-submit="onSubmit">
    </search>
    <div :class="focus?'productList margin':'productList'">
      <grid :cols="2" :show-lr-borders="false" :show-vertical-dividers="false">
        <grid-item v-for="item in products" :key="item.id" class="productItem" :link="'/detail?id='+item.id">
          <img :src="item.url" style="width:100%">
          <p class="name">{{item.name}}</p>
          <p class="count">{{item.count}}</p>
          <p class="price">¥{{item.price}}</p>
        </grid-item>
      </grid>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',     //搜索的值
      results: [],   //搜索关联列表
      products: [],  //搜索结果的产品列表
      focus:false,   //搜索框是否获取焦点
      //数据
      list: [
        {
          id: 1,
          name: '粉色多头康乃馨',
          count: '10支(多头)',
          price: '58',
          url: 'assets/flower1.jpg'
        },
        {
          id: 2,
          name: '红色多头康乃馨',
          count: '20支(多头)',
          price: '68',
          url: 'assets/flower2.jpg'
        },
        {
          id: 3,
          name: '白色多头玫瑰花',
          count: '11支(多头)',
          price: '78',
          url: 'assets/flower3.jpg'
        },
        {
          id: 4,
          name: '蓝色色多头玫瑰花',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
        {
          id: 5,
          name: '蓝色色多头玫瑰花',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
        {
          id: 7,
          name: '粉色康乃馨',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
        {
          id: 8,
          name: '粉色康乃馨',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
        {
          id: 9,
          name: '黄色康乃馨',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
        {
          id: 10,
          name: '黄色康乃馨',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
        {
          id: 11,
          name: '红色康乃馨',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
        {
          id: 12,
          name: '红色康乃馨',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
        {
          id: 13,
          name: '白色郁金香',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
        {
          id: 14,
          name: '紫色郁金香',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
        {
          id: 15,
          name: '紫色郁金香',
          count: '12支(多头)',
          price: '88',
          url: 'assets/flower4.jpg'
        },
      ]
    }
  },
  methods: {
    resultClick(item) {
      this.focus = false;
      this.products = this.list.filter(obj => obj.name == item.name);
    },
    getResult(val) {
      if (val) {
        this.results = this.list.filter(item => {
          if (item.name.includes(val)) {
            item.title = item.name;
            return item;
          }
        });
      } else {
        this.results = [];
      }
    },
    onSubmit() {
      this.$refs.search.setBlur()
      this.$vux.toast.show({
        type: 'text',
        position: 'top',
        text: 'on submit'
      })
    },
    onfocus(){
      if(this.products.length){
        this.focus = true;
      }else{
        this.focus = false;
      }
    },
    onblur(){
      if(!this.products.length){
        this.focus = false;
      }else{
        this.focus = true;
      }
      this.$refs.search.setBlur();
    },
    onCancel() {
      console.log('on cancel')
      this.focus = false;
    }
  },
  mounted(){
    console.log(this.$route)
  }
}
</script>

<style lang="less" scoped>
.margin{
  margin-top: 44px;
}
.productItem {
  .name {
    font-size: 14px;
  }
  .count {
    font-size: 12px;
    color: #8a8a8a;
  }
  .price {
    font-size: 12px;
    color: #ffa534;
  }
}
</style>
